{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
{% endblock %}

{% block content %}
<div class="background-container">
    {% for i in range(1, 4) %}
    <img src="{{ url_for('static', filename='bg-animation/' + i|string + '.jpeg') }}" class="bg-image" alt="Background {{i}}" style="filter: brightness(0.7);">
    {% endfor %}
</div>

<div class="text-overlay" id="text1">A Fun and Engaging Space for Learning English Words</div>
<div class="text-overlay" id="text2">Practice Your Spelling and Master Chinese Meanings</div>
<div class="text-overlay" id="text3">Challenge Yourself and Compete with Friends</div>
<div class="try-button-container">
    <a href="/login" class="try-button">Try it</a>
</div>

<script>
    const images = document.querySelectorAll('.bg-image');
    const texts = document.querySelectorAll('.text-overlay');
    let currentImageIndex = 0;
    let currentTextIndex = 0;

    function changeBackground() {
        images.forEach(img => img.classList.remove('active'));
        images[currentImageIndex].classList.add('active');
        currentImageIndex = (currentImageIndex + 1) % images.length;
    }

    function changeText() {
        texts.forEach(text => text.classList.remove('text-active'));
        texts[currentTextIndex].classList.add('text-active');
        currentTextIndex = (currentTextIndex + 1) % texts.length;
    }

    images[0].classList.add('active');
    texts[0].classList.add('text-active');

    setInterval(changeBackground, 5000);
    setInterval(changeText, 5000);
</script>
{% endblock %}
